<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="./js/china.js"></script>

</head>

<body>

    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        var china = echarts.init(document.getElementById('main'));

        var data = [{
            name: '江苏',
            value: 1
        }, {
            name: '北京',
            value: 34
        }, {
            name: '上海',
            value: 68
        }, {
            name: '重庆',
            value: 200

        }]

        var option = {
            visualMap:[{
                type:'piecewise'

            }],
            tooltip: {
                show: true

            },
            geo: {
                map: 'china'
            },
            series: [{
                name: '地图',
                type: 'map',
                geoIndex: 0,
                data:data

            }]

        };

        china.setOption(option);



    </script>
</body>

</html>